<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">处理记录</span>
      <span class="download-btn">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>
    <div class="table-form">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        size="small"
        :rowKey="record=> record.id"
        indeterminate="false"
      >
        <span
          slot="equipmentName"
          slot-scope="text,record"
          class="equipmentName"
          :title="record.equipmentName"
        >{{record.equipmentName}}</span>
        
        
        <template
          slot="photoList"
          class="solve-img"
          slot-scope="photoList"
        >
          <div v-viewer>
            <img
              class="byimg"
              :src="img.imageUrl"
              data-first-index="0"
              :data-secondIndex="indexs"
              v-for="(img, indexs) in  photoList"
              :key="indexs"
              alt
            />
          </div>
        </template>
        <span slot="action" slot-scope="text,record">
          <a class="solvebtn" @click="showModal(record)">处理详情</a>
          <!-- <a-button type="primary" class="add-btn solceBtn"  @click="showConfirm">填写报告</a-button>
          <a-button type="danger" class="solceBtn">复核通过</a-button>-->
        </span>
      </a-table>
      <div class="bottompage">
        <!--<a-button type="danger" class="solceBtn">复核通过</a-button>-->
        <a-pagination
          v-model="dataList.current"
          :show-total="total => `共 ${total} 条记录`"
          :total="total"
          :defaultPageSize="dataList.size"
          :item-render="itemRender"
          @change="pagechangeFns"
        />
      </div>
    </div>
    <!-- 模态框 -->
    <a-modal v-model="visible" title="处理详情" centered @ok="handleOk" width="60%" :footer="null">
      <div class="page-body">
        <a-form layout="horizontal" :colon="false" :label-col="{span:9}" :wrapper-col="{span:12}">
          <a-row type="flex">
            <!--<a-col :span="9" :offset="3" width="100%">
                <a-form-item class="form-item" label="内容分类" :colon="false">{{detail.contentType}}</a-form-item>
            </a-col>-->
            <a-col :span="6" :offset="2">
              <a-form-item class="form-item" label="异常项:" :colon="false">{{modalList.warningName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item class="form-item" label="处理时间:" :colon="false">{{modalList.handleTime}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item class="form-item" label="异常值:" :colon="false">{{modalList.rtd}}</a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="6" :offset="2">
              <a-form-item
                class="form-item"
                label="值域:"
                :colon="false"
              >{{modalList.minValue}}-{{modalList.maxValue}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item class="form-item" label="异常类型:" :colon="false"></a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item class="form-item" label="故障类型:" :colon="false"></a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="6" :offset="2">
              <a-form-item class="form-item" label="故障描述:" :colon="false">{{modalList.note}}</a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col style="width:100%">
              <a-form-item label="现场照片:" :label-col="{span:4}" :wrapper-col="{span:20}">
                <div v-viewer>
                  <img
                    class="byimg"
                    v-for="(img,indexs) in modalList.photoList"
                    :key="indexs"
                    :src="img.imageUrl"
                    alt
                  />
                </div>
              </a-form-item>
            </a-col>
          </a-row>

          <!--<a-row>
              <a-col>
                <a-form-item label :colon="false" :wrapper-col="{span:20}">
                  <a-textarea
                    style="margin-left:80px"
                    placeholder
                    :rows="15"
                    v-model="detail.content"
                    disabled
                  >{{detail.content}}</a-textarea>
                </a-form-item>
              </a-col>
          </a-row>-->
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
import moment from "moment";
var arr = [
  {
    companyName: "string //公司名字",
    monitorName: "string //监测点名字",
    photoList: [
      {
        photoAddress: "1",
        isAfter: "0",
      },
      {
        photoAddress: "2",
        isAfter: "1",
      },
      {
        photoAddress: "3",
        isAfter: "0",
      },
      {
        photoAddress: "4",
        isAfter: "1",
      },
    ],
  },
  {
    companyName: "string //公司名字",
    monitorName: "string //监测点名字",
    photoList: [
      {
        photoAddress: "1",
        isAfter: "0",
      },
      {
        photoAddress: "2",
        isAfter: "1",
      },
      {
        photoAddress: "3",
        isAfter: "0",
      },
      {
        photoAddress: "4",
        isAfter: "1",
      },
    ],
  },
  {
    companyName: "string //公司名字",
    monitorName: "string //监测点名字",
    photoList: [
      {
        photoAddress: "1",
        isAfter: "0",
      },
      {
        photoAddress: "2",
        isAfter: "1",
      },
      {
        photoAddress: "3",
        isAfter: "0",
      },
      {
        photoAddress: "4",
        isAfter: "1",
      },
    ],
  },
];
export default {
  data() {
    return {
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          scopedSlots: { customRender: "name" },
          width: "5%",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.dataList.current - 1) * this.dataList.size + index + 1}`,
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          align: "center",
          width: "20%",
          scopedSlots: { customRender: "companyName" },
        },
        {
          title: "站点名称",
          dataIndex: "monitorName",
          width: "10%",
          align: "center",
        },
        {
          title: "异常项",
          dataIndex: "warningName",
          align: "center",
        },
        {
          title: "异常时间",
          dataIndex: "createTime",
          align: "center",
        },
        {
          title: "处理结果",
          dataIndex: "handleResult",
          align: "center",
        },

        {
          title: "现场照片",
          dataIndex: "photoList",
          scopedSlots: { customRender: "photoList" },
          align: "center",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "10%",
          align: "center",
        },
      ],
      arr,
      //模态框
      visible: false,
      dataList: {
        current: 1,
        size: 10,
        beginTime: "",
        endTime: "",
        equipmentTypeId: "",
        status: 1,
        sampleType: "",
        equipmentName: "",
        mn: "",
      },
      total: 0, //总数
      modalList: {}, //模态框获取参数
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows);
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {

    //处理记录列表
    getData() {
      this.$api.PostwarningRecords(this.dataList).then((res) => {
        console.log(res);
        this.data = res.data.data;
        this.total = res.data.total;
        this.data.forEach((v) => {
          v.createTime = moment(v.createTime).format("YYYY-MM-DD hh:ss:mm");
          if (v.handleTime != null) {
            v.handleTime = moment(v.handleTime).format("YYYY-MM-DD hh:ss:mm");
          }
        });
      });
      console.log(this.data);
    },
    //分页
    pagechangeFns(page, pageSize) {
      this.dataList.current = page;
      this.dataList.size = pageSize;
      this.getData();
    },
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    aa(data) {
      console.log(data);
    },
    //模态框
    showModal(data) {
      this.visible = true;

      this.modalList = data;
      console.log(this.modalList);
    },
    showConfirm() {
      this.$confirm({
        title: "Do you Want to delete these items?",
        content: () => <div style="color:red;">Some descriptions</div>,
        onOk() {
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss" >

.byimg {
  width: 200px;

  margin-left: 10px;
}
#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}

::v-deep .solve-img {
  height: 26px;
}
::v-deep .solve-img img {
  width: 24px;
  height: 20px;
  margin-right: 5px;
}
.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}

.bottompage {
  //width: 96%;
  position: absolute;
  right: 3%;
  bottom: 10px;
  //display: flex;
  //justify-content: space-between;
}
.equipmentName {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  vertical-align: middle;
}
::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
  height: 60px;
}

.ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
.solceBtn {
  height: auto;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 10px;
}
</style>

